<template>
	<!-- 订单管理 -->
	<div id="order">
		<div class="order-top">
			<div class="top-el-input">
				<el-input v-model="userId" placeholder="请输入用户id"></el-input>
				<el-input v-model="orderId" placeholder="请输入订单编号"></el-input>
			</div>
			<div class="top-block">
				<div class="block">
					<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" size="large">
					</el-date-picker>
				</div>
			</div>
			<div class="top-el-select">
				<el-select v-model="value" clearable placeholder="选择订单状态">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="top-el-button">
				<el-button type="primary" icon="el-icon-search" @click="searchOrder">查找</el-button>
				<el-button type="primary" icon='el-icon-download' @click="downloadExcel">导出</el-button>
			</div>
		</div>
		<div class="order-center">
			<template>
				<el-table :data="tableData2" border style="width: 100%" :header-cell-style="{textAlign: 'center'}"
					:cell-style="{textAlign:'center'}">
					<el-table-column prop="orderSn" label="订单编号" width="180">
					</el-table-column>
					<el-table-column prop="userId" label="用户id">
					</el-table-column>
					<el-table-column prop="orderStatus" label="订单状态">
						<template slot-scope="scope">
							{{scope.row.orderStatus==101?'未付款':scope.row.orderStatus==1?'注册赠券':'兑换码'}}
						</template>
					</el-table-column>
					<el-table-column prop="orderPrice" label="订单金额">
					</el-table-column>
					<el-table-column prop="actualPrice" label="支付金额">
					</el-table-column>
					<el-table-column label="支付时间">
					</el-table-column>
					<el-table-column label="物流单号">
					</el-table-column>
					<el-table-column label="物流渠道">
					</el-table-column>
					<el-table-column label="操作" width="180">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="details(scope.row)">详情</el-button>
							<el-button type="danger" size="mini">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<el-dialog id="orderDetail" title="详情" :visible.sync="dialogVisible " width="700px">
				<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm"
					id="addfrom">
					<el-form-item label="订单编号">
						<el-col>{{ruleForm.id}}</el-col>
					</el-form-item>
					<el-form-item label="订单状态">
						<template slot-scope="scope">
							<el-tag>{{ruleForm.orderStatus==101?'未付款':'已付款'}}</el-tag>
						</template>
					</el-form-item>
					<el-form-item label="订单用户">
						<el-col>{{ruleForm.nickname}}</el-col>
					</el-form-item>
					<el-form-item label="收货信息">
						<!-- （收货人）黄 （手机号）13256565656 （地址）北京市市辖区东城区 撒打发啊 -->
						<el-row>
							<el-col>（收货人）{{ruleForm.consignee}}（手机号）{{ruleForm.mobile}}（地址）{{ruleForm.address}}</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="商品信息">

						<template>
							<el-table :data="tableData" border style="width: 100%"
								:header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign:'center'}">
								<el-table-column prop="goodsName" label="商品名称">
								</el-table-column>
								<el-table-column prop="goodsSn" label="商品编号">
								</el-table-column>
								<el-table-column prop="specifications" label="货品规格">
								</el-table-column>
								<el-table-column prop="price" label="货品价格">
								</el-table-column>
								<el-table-column prop="number" label="货品数量">
								</el-table-column>
								<el-table-column label="货品图片">
									<template slot-scope="scope">
										<img :src="scope.row.picUrl" class="imageUrl" />
									</template>

								</el-table-column>
							</el-table>
						</template>

					</el-form-item>
					<el-form-item label="费用信息">
						<el-col>
							(实际费用){{ruleForm.goodsPrice}}元 = (商品总价){{ruleForm.orderPrice}}元 +
							(快递费用){{ruleForm.freightPrice}}元 - (优惠减免){{ruleForm.couponPrice}}元 -
							(积分减免){{ruleForm.integralPrice}}元
						</el-col>

					</el-form-item>
					<el-form-item label="支付信息">
						（支付渠道）微信支付 （支付时间）
					</el-form-item>
					<el-form-item label="快递信息">
						（快递公司） （快递单号） （发货时间）
					</el-form-item>
					<el-form-item label="退款信息">
						（退款金额）元 （退款类型） （退款备注） （退款时间）
					</el-form-item>
					<el-form-item label="收货信息">
						（确认收货时间）
					</el-form-item>
					<!-- 					<div class="item-button">
						<el-button @click="dialogVisible=false">取消</el-button>
						<el-button type="primary" @click="printData">打印</el-button>	
					</div> -->
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" v-print="print">打印</el-button>
					<!-- @click="printData" -->
				</span>

			</el-dialog>
		</div>
		<div class="order-buttom">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		allOrder,
		detailOrder
	} from '../../https/mall'
	export default {
		data() {
			return {
				input: '',
				options: [{
						value: 1,
						label: '未付款'
					}, {
						value: 2,
						label: '用户取消'
					}, {
						value: 3,
						label: '系统取消'
					}, {
						value: 4,
						label: '已付款'
					}, {
						value: 5,
						label: '申请退款'
					},
					{
						value: 6,
						label: '已退款'
					},
					{
						value: 7,
						label: '已发货'
					},
					{
						value: 8,
						label: '用户收货'
					},
					{
						value: 9,
						label: '系统收货'
					},
				],
				// 用户id
				userId: '',
				// 订单id
				orderId: '',
				//打印的配置信息
				print: {
					id: "addfrom",
					popTitle: '订单信息',
				},

				ruleForm: {
					//名称
					id: '',
					// 订单状态
					orderStatus: '',
					// 用户名
					nickname: '',
					// 用户留言
					message: '',
					// 收获信息
					address: '',
					// 姓名
					consignee: '',
					// 电话
					mobile: '',
					// 原价
					goodsPrice: '',
					// 旧价格
					orderPrice: '',
					// 快递费
					freightPrice: '',
					// 积分减免
					integralPrice: '',
					// 优惠减免
					couponPrice: ''
				},
				value: '',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				// 时间的结果
				value2: '',
				//订单渲染
				tableData2: [],
				//默认显示的分页
				page: 1,
				//一页显示多少条数据
				limit: 0,
				//总共有多少条数据
				total: 0,
				// 订单弹出框的显示
				dialogVisible: false,
				// 订单中的表格
				tableData: []
			}
		},
		methods: {
			orders() {
				let params = {
					// 当前页面
					page: this.page,
					// 每页显示条数
					limit: this.limit,
					// id
					id: this.userId,
					// 订单名称
					name: this.orderId,
					// 时间
					timeArray: this.value2,
					// 订单状态
					orderStatusArray: this.value,
				}
				// 使用方法将数据进行渲染
				allOrder(params).then(res => {
					console.log("订单数据的渲染", res)
					this.tableData2 = res.data.data.list
					this.total = res.data.data.total
				}).catch(err => {
					console.log("渲染失败", err)
				})

			},
			handleSizeChange() {
				// 分页数据
			},
			handleCurrentChange() {
				// 当前页面的下标
			},
			details(row) {
				// 详情页面的数据
				this.dialogVisible = true
				// 调用查询接口的数据
				let params = {
					id: row.id
				}
				detailOrder(params).then(res => {
					console.log("详情的数据", res)
					// 数据的渲染
					this.ruleForm.id = res.data.data.order.id
					this.ruleForm.orderStatus = res.data.data.order.orderStatus
					this.ruleForm.nickname = res.data.data.user.nickname
					this.ruleForm.message = res.data.data.order.message
					this.ruleForm.address = res.data.data.order.address
					this.ruleForm.consignee = res.data.data.order.consignee
					this.ruleForm.mobile = res.data.data.order.mobile
					this.ruleForm.goodsPrice = res.data.data.order.goodsPrice
					this.ruleForm.orderPrice = res.data.data.order.orderPrice
					this.ruleForm.freightPrice = res.data.data.order.freightPrice
					this.ruleForm.integralPrice = res.data.data.order.integralPrice
					this.ruleForm.couponPrice = res.data.data.order.couponPrice

					this.tableData = res.data.data.orderGoods

				}).catch(err => {

				})

			},
			searchOrder() {
				// 搜索功能		
				this.orders()
			},
			downloadExcel() {
				// 导出
				this.$confirm("此操作将导出列表excel文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.excelData = this.tableData2; //你要导出的数据list。
						if (this.tableData2.length != 0) {
							this.export2Excel();
						} else {
							this.$message({
								showClose: true,
								message: '列表数据为空',
								type: 'warning'
							});
							return false
						}
					})
					.catch(() => {});
			},
			export2Excel() {
				var that = this;
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require("../../excel/Export2Excel"); //这里必须使用绝对路径，根据自己的命名和路径
					const tHeader = [
						// 这个是导出excel里面的表头
						"订单ID",
						"订单编号",
						"用户ID",
						"订单状态",
						"是否删除",
						"收货人",
						"收货联系电话",
						"收货地址",
					]; // 导出的表头名
					const filterVal = [
						// 这个是你表格数据的字段
						"id",
						"orderSn",
						"userId",
						"orderStatus",
						"deleted",
						"consignee",
						"mobile",
						"address",

					]; // 导出的表头字段名
					const list = that.excelData;
					// that.excelData为传入的数据
					const data = that.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, `订单列表`); // 导出的表格名称，根据需要自己命名
					// tHeader为导出Excel表头名称，`xxxxxx`即为导出Excel名称
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]));
			},


		},
		mounted() {
			this.orders()
		},
	}
</script>

<style>
	.order-top {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: flex-start;
	}

	.top-el-input .el-input {
		float: left;
		width: 180px;
		margin: 0px 5px;
	}

	.top-el-select {
		margin: 0px 5px;
	}

	.order-buttom .block {
		float: left;
		padding: 30px;
	}

	.ord-span {
		color: #0081c2;
	}

	.el-form-item div {
		margin-left: 5px;
		text-align: left;
	}

	.item-button {
		float: right;
	}


	.imageUrl {
		width: 40px;
		height: 40px;
	}
</style>
